<template>
	<view class="orderDetails">
		<scroll-view scroll-y="true">
			<view class="top">
				<view>
					订单号：{{data.info.orderNo}}
					<image @click="copy" src="/static/img/index/193.png" mode="widthFix"></image>
				</view>
				<text :class="data.info.orderState.value">{{data.info.orderState.sellerDisName}}</text>
			</view>
			<view class="address">
				<image src="/static/img/index/77.png" mode="widthFix"></image>
				<view class="">
					<text>收货人：{{data.info.orderAddress.rcvName}}    {{data.info.orderAddress.rcvPhone}}</text>
					<text>{{data.info.orderAddress.address}}</text>
				</view>
			</view>
			<view class="goods">
				<view class="listItem" v-for="(item,index) in data.info.orderProducts" :key="index">
					<view class="left">
						<view class="img">
							<image v-if="item.productPicture"
								:src="data.httpUrl+'/app/file/viewFile?fileId='+item.productPicture" mode="aspectFill">
							</image>
						</view>
						<view class="">
							<text>{{item.productName}}</text>
							<text>{{item.specName}}，{{item.specValue}}</text>
							<view class="attr">
								<text v-for="(item2,index2) in item.attrs"
									:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
							</view>
						</view>
					</view>
					<view class="right">
						<text>￥{{item.price}}</text>
						<text>×{{item.num}}</text>
					</view>
				</view>
				<view class="bot_1">
					<view class="">
						商品总额：
						<text>共{{data.info.totalNum}}件</text>
					</view>
					￥{{data.info.totalProductAmount}}
				</view>
				<view class="bot">
					实付款
					<text>￥{{data.info.totalPayAmount}}</text>
				</view>
			</view>
			<view class="zffs"
				v-if="data.info.orderState.value != 'CANCEL' && data.info.orderState.value != 'WAIT_PAY'">
				<view class="">
					支付方式：
					<text>{{data.info.payWay}}</text>
				</view>
				<view class="">
					付款时间：
					<text>{{data.info.paySuccessTime}}</text>
				</view>
				<view class="">
					下单时间：
					<text>{{data.info.createTime}}</text>
				</view>

			</view>
		</scroll-view>
		<view class="bot"
			v-if="data.info.orderState.value != 'CANCEL' && data.info.orderState.value != 'REFUND' && data.type != 1">
			<text @tap="handeClick">{{changeBot(data.info.orderState.value)}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive,
	} from 'vue';
	import { orderDetailBySonOrder } from '@/utils/api/goods'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const data = reactive<any>({
		info: { orderState: {} },
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ id, type }) => {
		data.id = id;
		data.type = type;
	})
	onShow(() => {
		orderDetailBySonOrder({ data: { sonOrderNo: data.id } }).then((res) => {
			data.info = res.data;
		})
	})
	const copy = () => {
		uni.setClipboardData({
			data: data.info.orderNo,
			success: () => {
				uni.showToast({
					title: '复制成功!',
					icon: 'none'
				})
			},
		});
	}
	const changeBot = (type) => {
		if (type == 'COMPLETE') {
			return '查看评价'
		} else if (type == 'WAIT_RECEIVE') {
			return '查看物流'
		} else if (type == 'WAIT_PAY') {
			return '提醒付款'
		} else {
			return '去发货'
		}
	}
	const handeClick = () => {
		const { value } = data.info.orderState;
		if (value == 'WAIT_PAY') {
			//提醒付款
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			setTimeout(() => {
				uni.showToast({
					title: '操作成功!',
					icon: 'none'
				})
			}, 1000)
		} else if (value == 'WAIT_SEND') {
			//发货

			uni.showActionSheet({
				itemList: ['发货', '扫码核销'],
				success: (e) => {
					if (e.tapIndex == 0) {
						//发货
						uni.navigateTo({
							url: '/pages/sendOutGoods/index?id=' + data.info.orderNo
						})
					}
					if (e.tapIndex == 1) {
						//发货
						uni.scanCode({
							success: function (res) {
								const codeData = res.result
								const jsonData = JSON.parse(codeData)
								const dataType = jsonData?.dataType
								const dataCode = jsonData?.dataCode;
								if (dataType == 'verifyProduct') {
									verifyOrder({ data: { verifyCode: dataCode } }).then((res) => {
										if (res.code == 200) {
											uni.showToast({
												title: '核销成功！',
												icon: 'none'
											})
											if (!data.obj.orderState) {
												item.orderState.sellerDisName = '已完成'
												item.color = '#BFBFBF';
												item.orderState.value = 'COMPLETE'
											} else {
												data.result.list.splice(index, 1)
											}

										}
									})
								}

							}
						});
					}
				}
			})







		} else if (value == 'WAIT_RECEIVE') {
			//已发货
			uni.navigateTo({
				url: '/pages/logistics/index?id=' + data.info.orderNo + '&isMj=1'
			})
		} else {
			//查看评价
			uni.navigateTo({
				url: '/pages/evaluationManagement/index?id=' + data.info.orderNo
			})
		}
	}
</script>

<style scoped lang="scss">
	.attr {

		text {
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0 !important;
		}
	}

	scroll-view {
		flex: 1;
		overflow: auto;
	}

	.orderDetails {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F4F6FA;

		.top {
			padding: 24rpx;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #262626;
			margin: 24rpx;
			background: #fff;

			view {
				display: flex;
				align-items: center;

				image {
					margin-left: 10rpx;
					width: 30rpx;
				}
			}

			.CANCEL,
			.COMPLETE {
				color: #BFBFBF;
			}

			.WAIT_RECEIVE,
			.WAIT_PAY {
				color: #FF8C00;
			}

			.WAIT_SEND {
				color: #FF263F;
			}

		}

		>.bot {
			padding: 18rpx 32rpx 50rpx 0;
			display: flex;
			justify-content: flex-end;
			margin-top: 50rpx;
			background: #fff;

			text {
				width: 160rpx;
				line-height: 64rpx;
				border-radius: 64rpx;
				text-align: center;
				color: #fff;
				background: #6B64D3;
			}
		}

		.address {
			display: flex;
			align-items: flex-start;
			padding: 24rpx;
			margin: 0 24rpx;
			background: #fff;
			border-radius: 24rpx;

			image {
				width: 48rpx;
				margin-right: 16rpx;
			}

			view {
				display: flex;
				flex-direction: column;
			}

			text:nth-of-type(2) {
				margin-top: 10rpx;
			}
		}

		.zffs {
			padding: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			margin: 0 24rpx;

			view {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}

			>view:nth-of-type(1) {
				margin-top: 0;
			}
		}

		.goods {
			border-radius: 24rpx;
			padding: 24rpx;
			background: #fff;
			margin: 24rpx;

			.listItem {
				display: flex;
				margin-bottom: 32rpx;

				.left {
					flex: 1;
					display: flex;
					align-items: flex-start;

					.img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 24rpx;
						margin-right: 24rpx;
						background: #ccc;

						image {
							width: 100%;
							border-radius: 24rpx;
							height: 100%;
						}
					}

					>view:nth-of-type(2) {
						margin-top: 8rpx;
						display: flex;
						flex-direction: column;
						flex:1;
						text:nth-of-type(2) {
							font-size: 24rpx;
							color: #8C8C8C;
							margin-top: 10rpx;
						}
					}
				}

				.right {
					margin-top: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					text:nth-of-type(1) {
						color: #000000;
						font-weight: bold;
					}

					text:nth-of-type(2) {
						font-size: 20rpx;
						color: #8C8C8C;
						margin-top: 10rpx;
					}
				}
			}

			.bot_1 {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				view {
					display: flex;
					flex-direction: column;

					text {
						font-size: 24rpx;
						color: #8C8C8C;
					}
				}
			}

			.bot {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				justify-content: flex-end;

				text {
					font-size: 36rpx;
					color: #6B64D3;
				}
			}
		}
	}
</style>